/**
 * @constructor 选择导入方式
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Balloon } from '@teamix/ui';
import './index.scss';
import intl from '../../../locale';
import { getFeature } from 'utils/features';
const prefix = 'import-ways-content';
export default class ImportWays extends React.PureComponent {
  static propTypes = {
    activeWay: PropTypes.string,
    handleSelectWay: PropTypes.func,
    isRetry: PropTypes.bool,
  };

  static defaultProps = {
    activeWay: 'ALIYUN',
    handleSelectWay: () => {},
    isRetry: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      ways: [
        {
          id: 2,
          name: intl.get({
            id: 'code-assets.importProjectModal.chooseWays.AlibabaCloudCode',
            defaultMessage: '阿里云代码',
          }),
          imgUrl: 'https://img.alicdn.com/tfs/TB1zDB5m.D1gK0jSZFGXXbd3FXa-58-58.png',
          way: 'ALIYUN',
          disabled: false,
        },

        {
          id: 1,
          name: intl.get({
            id: 'code-assets.importProjectModal.chooseWays.UserCreatedGitlab',
            defaultMessage: '自建 GitLab',
          }),
          imgUrl: 'https://img.alicdn.com/tfs/TB1cB09mYY1gK0jSZTEXXXDQVXa-58-58.png',
          way: 'PRIVATE_GITLAB',
          disabled: false,
        },

        {
          id: 4,
          name: 'GitLab',
          imgUrl: 'https://img.alicdn.com/tfs/TB1prx6mVP7gK0jSZFjXXc5aXXa-58-58.png',
          way: 'GITLAB',
          disabled: false,
        },

        {
          id: 3,
          name: intl.get({
            id: 'code-assets.importProjectModal.chooseWays.CodeCloud',
            defaultMessage: '码云',
          }),
          imgUrl: 'https://img.alicdn.com/tfs/TB1UTN_m8r0gK0jSZFnXXbRRXXa-58-58.png',
          way: 'GITEE',
          disabled: false,
        },

        {
          id: 8,
          name: 'Coding',
          imgUrl:
            'https://img.alicdn.com/imgextra/i4/O1CN015LLtxS1gmmBsyrDgq_!!6000000004185-2-tps-400-400.png',
          way: 'CODING',
          disabled: false,
        },

        {
          id: 5,
          name: 'Github',
          imgUrl: 'https://img.alicdn.com/tfs/TB10Zt5m1L2gK0jSZPhXXahvXXa-58-58.png',
          way: 'GITHUB',
          disabled: false,
        },

        {
          id: 6,
          name: 'SVN',
          imgUrl: 'https://img.alicdn.com/tfs/TB14oY8SpP7gK0jSZFjXXc5aXXa-200-200.svg',
          way: 'SVN',
          disabled: false,
        },

        {
          id: 7,
          name: intl.get({
            id: 'code-assets.importProjectModal.chooseWays.ImportUrl',
            defaultMessage: 'URL 导入',
          }),
          imgUrl: 'https://img.alicdn.com/tfs/TB1Tmt5m8v0gK0jSZKbXXbK2FXa-58-58.png',
          way: 'url',
          disabled: false,
        },

        {
          id: 8,
          name: '本地导入工具',
          imgUrl:
            'https://img.alicdn.com/imgextra/i4/O1CN01x3kSDW21K1K66NBPx_!!6000000006965-2-tps-56-56.png',
          way: 'IMPORTLOCALLY',
          disabled: false,
        },
        // {
        //   id: 6,
        //   name: 'CODING',
        //   imgUrl: 'https://img.alicdn.com/tfs/TB188x7m7L0gK0jSZFxXXXWHVXa-58-58.png',
        //   way: 'other',
        // },
      ],
    };
  }

  isSupportedType(type) {
    const supportedType = getFeature('project.import.supportedType');
    return supportedType.includes('ALL') || supportedType.includes(type);
  }

  render() {
    const { ways } = this.state;
    const { activeWay, isRetry } = this.props;
    return (
      <div className={`${prefix}`} style={{ display: isRetry ? 'none' : 'flow-root' }}>
        {ways.filter(va => this.isSupportedType(va.way)).map((item) => {
          const trigger = (
            <div
              className={`${prefix}-item ${activeWay === item.way ? 'active' : ''} ${
                item.disabled ? 'disabled' : ''
              }`}
              key={item.id}
              onClick={() => {
                if (item.disabled) {
                  return;
                }
                this.props.handleSelectWay(item.way, item.name);
              }}
            >
              <div className={`${prefix}-item-img`}>
                <img src={item.imgUrl} alt="" />
              </div>
              <div className={`${prefix}-item-name`}>{item.name}</div>
            </div>
          );

          if (item.disabled) {
            return (
              <Balloon.Tooltip trigger={trigger} align="t">
                {intl.get({
                  id: 'code-assets.importProjectModal.chooseWays.NotActivated',
                  defaultMessage: '尚未开通，敬请期待',
                })}
              </Balloon.Tooltip>
            );
          }
          return trigger;
        })}
      </div>
    );
  }
}
